<style lang="less">
  .filltitle {
    text-align: center;
    line-height: 28px;
    margin-bottom: 20px;
    dt {
      font-size: 16px;
    }
    dd {
      font-size: 12px;
      color: #888;
    }
  }

  .w100 {
    width: 100%;
  }

  .login-wrap {
    padding: 0 0.3rem;
  }

  .orderLink {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    font-size: 14px
  }
  .tiper{
    color:#636363;
    text-align:center;
    margin-top:20px;
  }
</style>


<template>
  <div class="contain">
    <div class="loader-base" v-if="showLoad">
      <div class="loader-wrap"></div>
    </div>
    <!--<div class="detail-head-tip" style="position: absolute; width:100%" v-if="hasBought">
      <router-link class="ft16" style="color:#ff7202" :to="{path:'/MyOrderDetail'}">查看我的订单</router-link>
    </div>-->

    <img src="@/assets/bg/pc_head.png" style="width:100%">
      <div class="filltitle">
        <dl v-if="!hasBought">
          <dt>请填写您的报名信息</dt>
          <dd>此信息为报名记录唯一凭证，请确保无误</dd>
        </dl>
        <dl v-else>
          <dt>您已参与了此活动</dt>
          <dd>可在页面底部点击[我的订单]查看详情</dd>
        </dl>
      </div>
      <ul class="login-wrap">
        <li class="displayflex">
          <span class="iconfont icon-account"></span>
          <div class="flex1 login-ipt"><input type="text" placeholder="姓名" v-model.trim="name" maxlength="4" :disabled="hasBought"></div>
          <span class="iconfont icon-del" v-if="name" @click="name=''"></span>
        </li>

        <li class="displayflex">
          <span class="iconfont icon-mobilephone"></span>
          <div class="flex1 login-ipt"><input type="tel" placeholder="手机号（家长）" v-model.trim="mobile" :disabled="hasBought"></div>
          <span class="iconfont icon-del" v-if="mobile" @click="mobile=''"></span>
        </li>

        <li class="displayflex">
          <span class="iconfont icon-school"></span>
          <div class="flex1 login-ipt"><input placeholder="就读学校" v-model.trim="school" :disabled="hasBought"></div>
          <span class="iconfont icon-del" v-if="school" @click="school=''"></span>
        </li>
        <div style="width: 100%;font-size: small;text-align: end">*以即将就读的年级为主&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</div>
        <li class="displayflex">
          <span class="iconfont icon-class"></span>
          <div class="displayflex w100">
            <popup-picker class="picker-wrap" title="班级" :data="ageList" placeholder="点击选择" value-text-align="right"
                          :show-name="ageshow" v-model="age" :disabled="hasBought"></popup-picker>
            <i class="iconfont icon-cc-right"></i>
          </div>
        </li>

        <div v-if="!hasBought" class="agbtn btn-info" style="display:block; height:45px; line-height:45px;" @click="goNext">
          确认并继续
        </div>
        <template v-else>
          <router-link class="agbtn btn-danger" style="display:block; height:45px; line-height:45px;" :to="{path:'/MyOrderDetail'}">我的订单</router-link>
          <div class="tiper ft14">请在校区上课前向接待人员出示签到二维码（二维码点击我的订单即可显示）</div>
        </template>
      </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showLoad: false,

        name: '',
        mobile: '',
        school: '',
        ageVal: 0,

        ageshow: true,
        age: [],
        ageList:
          [
            [
              {
                value: "5",
                name: "幼儿园（大班）"
              },
              {
                value: "6",
                name: "小学一年级"
              },
              {
                value: "7",
                name: "小学二年级"
              },
              {
                value: "8",
                name: "小学三年级"
              },
              {
                value: "9",
                name: "小学四年级"
              },
              {
                value: "10",
                name: "小学五年级"
              },
              {
                value: "11",
                name: "小学六年级"
              }
            ]
          ],
        orderDetail: null,
        hasBought: false,
      }
    },
    watch: {
      age(n) {
        this.ageVal = n[0];
      },
      school(n) {
        var l = 0,
          maxLength = 24
        for (var i = 0; i < this.school.length; i++) {
          if (/[\u4e00-\u9fa5]/.test(this.school[i])) {
            l += 2;
          } else {
            l++;
          }
          if (l > maxLength) {
            this.$vux.toast.show({
              type: "text", //success, warn, cancel, text
              text: "最长不能超过12个汉字或24个英文+数字"
            });
            this.school = this.school.substr(0, i);
            break;
          }
        }
      }
    },
    computed: {
      // code() {
      //     if (this.$route.query.code) {
      //         return this.$route.query.code;
      //     }
      // }
      WxOpenId() {
        if (localStorage.WeChatOpenId) {
          return localStorage.WeChatOpenId;
          // return 'oX-1E0nwxvXx8gQXzxFoC7y74rJ8';
        }
      }
    },
    methods: {
      goNext() {
        var reg = /^1[345789]\d{9}$/;

        if (this.name == "") {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "请填写姓名"
          });
          return false;
        }

        if (this.mobile == "" || !this.mobile) {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "请填写手机号"
          });
          return false;
        } else if (!reg.test(this.mobile)) {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "请填写正确手机号"
          });
          return false;
        }

        if (this.school == "") {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "请填写所在学校"
          });
          return false;
        }

        if (this.ageVal == 0) {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "请选择所在年级"
          });
          return false;
        }


        var YLBB_PersionalInfo = {
          Name: this.name,
          Mobile: this.mobile,
          School: this.school,
          Age: this.ageVal,
        }

        // alert(localStorage.WeChatOpenId);

        sessionStorage.YLBB_PersionalInfo = JSON.stringify(YLBB_PersionalInfo);
        this.$router.push({
          path: 'PickClass',
        })
      },
      getOpenid() {
        var self = this;
        if (this.WxOpenId && this.WxOpenId != '') {
          self.CheckBill();
        }
        else {
          var query = {
            Code: self.$route.query.code,
          }
          this.showLoad = true;
          this.Ajax.post("GetOpenId", query).then(function (resp) {
            self.showLoad = false;
            if (resp.IsSuccess) {
              localStorage.WeChatOpenId = resp.Data.openid;
              sessionStorage.clear();

            }
            else {
              self.$vux.toast.show({
                type: "warn", //success, warn, cancel, text
                text: "用户信息失效，重新登录中...",
                onHide() {
                  if (localStorage.orderSign && localStorage.orderSign == 'tzw') {
                    window.location.href = 'http://wx.yilaibaobei.com/wxtzw.html';
                  }
                  else {
                    window.location.href = 'http://wx.yilaibaobei.com/wx.html';
                  }

                }
              });
            }
          });
        }
      },
      CheckBill() {
        var self = this;
        var query = {
          WxOpenID: this.WxOpenId,
          // WxOpenID: 'oX-1E0nwxvXx8gQXzxFoC7y74rJ8',
        }
        this.showLoad = true;
        this.Ajax.post("GetOrderByQuery", query).then(function (resp) {
          self.showLoad = false;
          if (resp.IsSuccess) {
            if (resp.Data != null) {
              console.log(resp.Data);
              self.orderDetail = resp.Data;
              localStorage.orderDetail = JSON.stringify(resp.Data);
              self.hasBought = true;
              if (self.$route.query.state != 'tzw') {
                self.$vux.alert.show({
                  title: '提示',
                  content: '此课程每人限购一次，您已经购买过此课程，可以继续浏览课程，但无法下单购买，敬请注意',
                });
              }
            } else {
              self.giveAlert();
            }
          }
          else {
            self.$vux.toast.show({
              type: "warn", //success, warn, cancel, text
              text: "数据获取失败，请刷新",
            });
          }
        });
      },
      giveAlert() {
        if (this.$route.query.state != 'tzw' && !this.hasBought) {
          var msg = '1分钱抢价值￥1380元的暑期七天语文写作提高课程';
          this.$vux.alert.show({
            title: '大礼包',
            content: msg,
            buttonText: '知道了',
            hideOnBlur: true,
          })
        }
      },
    },

    created() {
      localStorage.removeItem('orderSign');
      //加入报名标识
      if (this.$route.query.state && this.$route.query.state != '' && this.$route.query.state != 0 && this.$route.query.state != 'STATE') {
        localStorage.orderSign = this.$route.query.state;
      }
      //加入报名标识
      this.getOpenid();
    }
  }
</script>
